<template>
  <div class="form-main select-box">ss
    <!-- <dropDownFilter 
      :multiple="true"
      :checkAll="true"
      filter
      clearable
      placeholder="Region"
      class="select-b1"
      v-model="regionVal"
      :options="regionOptions"
      @change="changeSelectRegion" /> -->
    <dropDown
      placeholder="Region"
      class="select-b2"
      :multiple="true"
      v-model="regionVal"
      :options="regionOptions"
      @change="changeSelectRegion" />
  </div>
</template>
 
<script>
import dropDownFilter from '@/components/dropDown/dropDownFilter.vue'
import dropDown from './../../../components/dropDown/dropDownBox'
export default {
  name: 'formSelectBox',
  components: {
    dropDown,
    dropDownFilter
  },
  data () {
    return {
      msg:'',
      regionVal: ['Asia', 'Antarctica'],
      // regionVal: 'Asia',
      regionOptions: [
        {value: 'Europe', label: 'Europe'},
        {value: 'Asia', label: 'Asia'},
        {value: 'Africa', label: 'Africa'},
        {value: 'Antarctica', label: 'Antarctica'},
        {value: 'Oceania', label: 'Oceania'},
        // {value: '', label: ''},
        // {value: '', label: ''},
      ],
    }
  },
  methods: {
    changeSelectRegion(v) {
      // console.log(v)
    }
  }
}
</script>
 
<style scoped lang="scss">
  .select-box{
    height: 100%;
  }
</style>